<template>
    <div>
        <el-container style="height: 100%; border: 1px solid #eee;">
            <el-aside :width="aside_witch" style="background-color: rgb(238, 241, 246);">
                <Aside :isCollapse="isCollapse"></Aside>
            </el-aside>

            <el-container style="height: 100%; background-color: rgb;">
                <el-header style="text-align: right; font-size: 12px height: 100%; border-bottom: 1px solid rgba(168, 168, 168, 0.3)">
                    <Header @doCollapse="doCollapse" :icon="icon"></Header>
                </el-header>

                <el-main>
                    <!-- <Main></Main> -->
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>


<script>
import Aside from "../views/AsideView.vue"
import Header from "../views/HeaderView.vue"

export default {
    name: "Index",
    components: {
        Aside,
        Header,
    },
    data() {
        return {
            isCollapse: false,
            aside_witch: '200px',
            icon: 'el-icon-s-fold'
        }
    },
    methods: {
        doCollapse() {
            this.isCollapse = !this.isCollapse
            if (!this.isCollapse) {
                this.aside_witch = '200px'
                this.icon = 'el-icon-s-fold'
            } else {
                this.aside_witch = '64px'
                this.icon = 'el-icon-s-unfold'
            }
        }
    }
};
</script>

<style scoped>
.el-main {
    padding: 5px;
}

.el-header {
    /* background-color: #B3C0D1; */
    color: #333;
    line-height: 60px;

}

.el-aside {
    color: #333;

}
</style>